<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sorry! 在线生成</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/static/w3.css" />
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: 'Arial', sans-serif;
            min-height: 100vh;
        }
        
        .main-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            margin-top: 20px;
            margin-bottom: 20px;
        }
        
        .video-container {
            position: relative;
            width: 100%;
            max-width: 400px;
            margin: 0 auto 30px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .video-container video {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .form-container {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            margin: 20px 0;
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        .input-group label {
            display: block;
            margin-bottom: 8px;
            color: #495057;
            font-weight: 600;
            font-size: 14px;
        }
        
        .input-group input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }
        
        .input-group input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .generate-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 18px;
            font-weight: 600;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            margin-top: 20px;
        }
        
        .generate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }
        
        .generate-btn:active {
            transform: translateY(0);
        }
        
        .title {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 28px;
            font-weight: 700;
        }
        
        .sidebar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }
        
        .sidebar a {
            transition: all 0.3s ease;
        }
        
        .sidebar a:hover {
            background: #667eea !important;
            color: white !important;
        }
        
        .menu-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .menu-btn:hover {
            transform: scale(1.1);
            background: rgba(255, 255, 255, 1);
        }
        
        .result-container {
            margin: 20px 0;
            text-align: center;
        }
        
        .github-link {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e9ecef;
        }
        
        .github-link svg {
            transition: all 0.3s ease;
        }
        
        .github-link:hover svg {
            transform: scale(1.2);
            opacity: 0.8;
        }
        
        @media (max-width: 768px) {
            .main-container {
                margin: 10px;
                padding: 15px;
                border-radius: 10px;
            }
            
            .title {
                font-size: 24px;
                margin-bottom: 20px;
            }
            
            .form-container {
                padding: 20px 15px;
            }
            
            .input-group input {
                font-size: 16px;
                padding: 12px;
            }
            
            .generate-btn {
                padding: 12px 30px;
                font-size: 16px;
            }
        }
        
        @media (max-width: 480px) {
            .main-container {
                margin: 5px;
                padding: 10px;
            }
            
            .form-container {
                padding: 15px 10px;
            }
        }
    </style>
</head>

<body>
    <!-- Sidebar -->
    <div id="sidebar" class="w3-sidebar w3-bar-block sidebar" style="display:none">
        <button id="sidebar_close" class="w3-bar-item w3-large" style="border:none; background:none; cursor:pointer;">&times;</button>
        <a href="/tpl/sorry/" class="w3-bar-item w3-button">🎭 为所欲为</a>
        <a href="/tpl/wangjingze/" class="w3-bar-item w3-button">😋 我就是饿死</a>
        <a href="/tpl/kongming/" class="w3-bar-item w3-button">🧠 孔明</a>
        <a href="/tpl/dagong/" class="w3-bar-item w3-button">💼 打工</a>
        <a href="/tpl/diandongche/" class="w3-bar-item w3-button">🛵 电动车</a>
        <a href="/tpl/jinkela/" class="w3-bar-item w3-button">🌱 金坷垃</a>
        <a href="/tpl/marmot/" class="w3-bar-item w3-button">🐹 marmot</a>
    </div>

    <!-- Menu Button -->
    <button id="show_sidebar" class="menu-btn">☰</button>

    <!-- Main Container -->
    <div class="main-container">
        <h1 class="title">🎬 Sorry 动图生成器</h1>
        
        <div class="video-container">
            <video src="/static/sorry/template.mp4" controls="controls" muted></video>
        </div>

        <div class="form-container">

            <div class="input-group">
                <label>💬 第一句</label>
                <input name="first" type="text" placeholder="好啊">
            </div>

            <div class="input-group">
                <label>💬 第二句</label>
                <input name="second" type="text" placeholder="就算你是一流工程师">
            </div>

            <div class="input-group">
                <label>💬 第三句</label>
                <input name="third" type="text" placeholder="就算你出报告再完美">
            </div>

            <div class="input-group">
                <label>💬 第四句</label>
                <input name="fourth" type="text" placeholder="我叫你改报告你就要改">
            </div>

            <div class="input-group">
                <label>💬 第五句</label>
                <input name="fifth" type="text" placeholder="毕竟我是客户">
            </div>

            <div class="input-group">
                <label>💬 第六句</label>
                <input name="sixth" type="text" placeholder="客户了不起啊">
            </div>

            <div class="input-group">
                <label>💬 第七句</label>
                <input name="seventh" type="text" placeholder="sorry 客户真的了不起">
            </div>

            <div class="input-group">
                <label>💬 第八句</label>
                <input name="eighth" type="text" placeholder="以后叫他天天改报告">
            </div>

            <div class="input-group">
                <label>💬 第九句</label>
                <input name="ninth" type="text" placeholder="天天改 天天改">
            </div>

            <div id="result" class="result-container"></div>

            <button id="submit_btn" class="generate-btn">🎬 生成动图</button>

        </div>
        
        <div class="github-link">
            <a href="https://github.com/East196/sorrypy" target="_blank">
                <svg aria-hidden="true" height="32" version="1.1" viewBox="0 0 16 16" width="32" fill="#666">
                    <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
                </svg>
            </a>
        </div>
    </div>
    
    <script src="/static/cookies.js"></script>
    <script src="/static/main.js"></script>
</body>

</html>